<template>
  <view class="">
    <view class="login-container">
      <!-- 提示登录的图标 -->
      <view class="log_11">

      </view>

      <!-- 平台登录   @click="ptLogin"-->
      <button class="pt-load" hover-class="pt-load-hover"   @tap="getUserProfile">
        <text class="pt_icon"></text> 11平台账号微信登录
      </button>
      <view class="tips-text">
        <view class="tips-text-top">
          选择已有账号登录
        </view>
        <view class="tips-text-bottom">
          登录后尽享更多权益
        </view>
      </view>
      <!-- 平台登录 -->
     <view class="change_load">
        <!-- 微信登录按钮 -->
      <!--  <view type="primary" class="btn-login" @tap="getUserProfile">
          <text>微信</text>
        </view> -->
        <!-- 微信登录按钮 -->

        <!-- 手机号登录 -->
      <!--  <view type="primary" class="btn-login2" @tap="getPhoneLogin">
          <text>手机</text>
        </view> -->
        <!-- 手机号登录 -->
      </view>

    </view>

  </view>
</template>

<script>
  import md5 from "js-md5"
  import {
    mapMutations,
    mapActions
  } from 'vuex'
  export default {
    name: "my-login",
    data() {
      return {
        wxLoginUrl: '/WebApi/Wap/Action',
        signMd5: '',
        wx_flag: true
      };
    },
    methods: {
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateOid', 'updateUserPic', 'updataIsPhone','updateUid']),
      ...mapActions("m_cart", ["_querywebcartgoods"]),
      getPhoneLogin() {
        uni.navigateTo({
          url: `/subpkg/bind_iphone/bind_iphone`
        })
      },
      getUserProfile() {
        console.log(11)
        this.getToken();
      },
      ptLogin() {
        uni.navigateTo({
          url: `/subpkg/pt_login/pt_login`
        })
      },
      async getToken() {
        if (this.wx_flag) {
          this.wx_flag = false;
          const [err, res] = await uni.login().catch(err => err)
          console.log(res);
          if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！')
          this.signMd5 =
            `AppConfigId=2&Bid=65&Code=${res.code}&key=C63A39419CE64F258ADFE3FAF5E63477`;
          console.log(this.signMd5)
          this.signMd5 = md5(this.signMd5);
          console.log(this.signMd5)
          // 准备参数对象
          const query = {
            Code: res.code,
            Bid: 65,
            Sign: this.signMd5,
            AppConfigId: 2
          }
          console.log(`https://passport.9211.com/WebApi/Wap/Action?t=login&data=${JSON.stringify(query)}&pt=wxmini`)
          uni.request({
            url: `https://passport.9211.com/WebApi/Wap/Action?t=login&data=${JSON.stringify(query)}&pt=wxmini`,
            header: {
              'Content-Type': 'application/json' //自定义请求头信息
            },
            method: 'GET', //请求方式，必须为大写
            success: (reg) => {
              const {
                data
              } = reg;
              console.log('接口返回------', data);
              this.wx_flag = true;
              if (data.code == 0) {
                if (data.data.userId > 0) {
                  this.updateToken(data.data.st);
                  this.updateOid(data.data.oid);
                  this.updateUid(data.data.uid)
                  const userInfo = {
                    userId: data.data.userId,
                    userName: data.data.userName,
                    nickName: '',
                    avatarUrl: '',
                    isphone: false
                  }
                  this.updataIsPhone(false)
                  this.updateUserInfo(userInfo);
                  this._querywebcartgoods();
                  this.getUserPic(data.data.userId);
                } else if (!data.data.userId) {
                  uni.showModal({
                    title: '您还未绑定11平台账号!',
                    content: '请根据提示绑定账号',
                    showCancel: false, //没有取消按钮的弹框
                    buttonText: '如何绑定11账号',
                    duration: 2000,
                    success: (res) => {
                      if (res.confirm) {
                        uni.navigateTo({
                          url: `/subpkg/unBind_wx/unBind_wx?unid=${data.data.uid}&oid=${data.data.oid}`
                        })
                      }
                    }
                  });
                }

              } else {
                uni.$showMsg(data.msg);
              }

            }
          })
        }

      },
      async getUserPic(uid) {
        const signMd5 = md5(
          `Bid=66&UserId=${uid}&key=7863BD2768C14099BA0AC5070B469C76`);
        const result = await uni.request({
            url: `https://api.5211game.com/YYAvatar/Wap/Action?t=queryuseravatar&data=${JSON.stringify({Bid:66,UserId:uid,Sign:signMd5})}`,
            header: {
              'Content-Type': 'application/json' //自定义请求头信息
            },
            method: 'GET',
            success: (reg) => {
              console.log('头像', reg)
              this.updateUserPic(reg.data.data.PATH);
            },
            fail: (err) => {
              this.updateUserPic(
                'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
              )
            },
          }

        )

      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .login-container {
    // 登录盒子的样式
    display: flex;
    height: 100%;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 180rpx;
    box-sizing: border-box;
    .log_11 {
      width: 308rpx;
      height: 116rpx;
      margin: 0 auto;
      background: url('https://img.5211game.com/Base/xiaochengxu/static/logo_11.png');
      background-size: cover;
      margin-bottom: 80rpx;
    }

    // 平台登录
    .pt-load {
      width: 640rpx;
      height: 88rpx;
      background: linear-gradient(90deg, #F75803 0%, #FFA000 100%);
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: MicrosoftYaHei;
      font-size: 28rpx;
      color: #FFFFFF;


      .pt_icon {
        width: 30rpx;
        height: 30rpx;
        background: url('https://img.5211game.com/Base/xiaochengxu/static/pt_load.png');
        background-size: cover;
        margin: 0 20rpx;
      }
    }
    .pt-load-hover {
      background: linear-gradient(180deg, #F75803 0%, #FFA000 100%);
      transition: 0.2s ease;
    }
    .change_load {
      width: 640rpx;
      margin: 00 auto;
      display: flex;
      justify-content: center;
      flex-direction: row;
    margin-bottom: 70rpx;

      // 登录按钮的样式
      .btn-login {
        width: 80rpx;
        height: 80rpx;
        background: url('https://img.5211game.com/Base/xiaochengxu/static/wx_load.png');
        background-size: cover;
        border: none;
        position: relative;
        margin: 0 20rpx;

        text {
          width: 100%;
          text-align: center;
          font-family: MicrosoftYaHei;
          font-size: 22rpx;
          color: #666666;
          position: absolute;
          left: 0rpx;
          bottom: -40rpx;
        }
      }

      .btn-login2 {
        width: 80rpx;
        height: 80rpx;
        background: url('https://img.5211game.com/Base/xiaochengxu/static/phone_load.png');
        background-size: cover;
        position: relative;
        margin: 0 20rpx;

        text {
          width: 100%;
          text-align: center;
          font-family: MicrosoftYaHei;
          font-size: 22rpx;
          color: #666666;
          position: absolute;
          left: 0rpx;
          bottom: -40rpx;
        }
      }


    }

    // 按钮下方提示消息的样式
    .tips-text {
      width: 200rpx;
      height: 70rpx;
      margin: 60rpx auto;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      ::before {
        content: "";
        width: 120rpx;
        height: 1rpx;
        background: #E6E6E6;
        position: absolute;
        left: -130rpx;
        top: 50%;
        transform: translateY(-50%);
      }

      ::after {
        content: "";
        width: 120rpx;
        height: 1rpx;
        background: #E6E6E6;
        position: absolute;
        right: -130rpx;
        top: 50%;
        transform: translateY(-50%);
      }

      .tips-text-top {
        width:100%;
        text-align: center;
        font-family: MicrosoftYaHei;
        font-size: 24rpx;
        color: #CCCCCC;
      }

      .tips-text-bottom {
        width:100%;
        text-align: center;
        font-family: MicrosoftYaHei;
        font-size: 20rpx;
        color: #CCCCCC;
      }
    }
    .tips {
      width: 707rpx;
      margin: 0 auto;
    }
    
    .tips image {
      width: 100%;
      height: auto;
    }
    
  }
</style>